<template>
  <div class="jian20">
    <div class="content">
      <div class="name">歼-8</div>
      <div class="title">结构简介</div>
      <img
        class="plan"
        src="https://p2.ssl.qhimg.com/t015c0593ef7cc4ed77.png"
      />

      <div class="width">机高：5.41米</div>
      <div class="height">机长：19.25米</div>

      <div class="area">
        涡喷7甲涡轮喷气发动机

        <div class="line"></div>
      </div>

      <div class="enter">
        PL-2/2乙空空导弹

        <div class="line"></div>
      </div>
    </div>

    <div class="text" style="margin-top: 10vw">
      <div class="left" style="width: 60%">
        <div class="title">
          <div></div>
          历史背景
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            1963年7月，在当时国防部第六研究院技术报告会上，来自沈阳飞机设计研究所的顾诵芬提出了一款新型歼击机的设计报告。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            经过几年的认真准备和反复酝酿，航空工业拉开了研制新型高空高速歼击机的序幕。1964年5月，航空研究院在新机改进改型方案会议上提出，要在米格-21的基础上，设计一种性能更好的歼击机。同年10月，新型歼击机开始方案论证。在论证会上，沈阳飞机设计研究所提出了飞机装单台发动机和双台发动机两种方案。前者是全新研制的大推力发动机的方案，后者是采用成熟发动机（涡喷7甲）进行改型试制的方案。在航空研究院院长唐延杰主持下，会议确定采用双台发动机方案。这个正确的选择，稳妥，可靠，有一定的技术基础，是歼-8飞机能够研制成功的前提。
          </div>
        </div>
      </div>
      <div class="left" style="width: 40%">
        <div class="plan-name">歼-8I</div>
        <img
          class="plan1"
          src="https://p5.ssl.qhimg.com/t01566b3ecf45c6cd74.png"
        />
        <div class="plan-name">歼-8II</div>
        <img
          class="plan2"
          src="https://p1.ssl.qhimg.com/t017df8811ed71360df.png"
        />
      </div>
    </div>

    <div class="text">
      <div class="left" style="width: 100%">
        <div class="title">
          <div></div>
          总体评价
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            1985年11月，歼-8战斗机获中国国家级科技进步奖特等奖。2000年歼-8Ⅱ战斗机获中国国家科技进步奖一等奖
            。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            自从1980年服役以来，歼-8相继研制出歼-8白天型，全天型，歼-8Ⅱ等多个系列机型。特别歼-8Ⅱ型飞机，是中国空军和海军航空兵20世纪80年代至21世纪初主力战斗机种之一。在三十多年的漫长服役岁月里，歼-8不仅准备对抗ⅠDF、F-14、F-2和F-15等各型战斗机，就是面对“猛禽”F-22也可能要上去缠斗一番。在中国空军的武器装备还并不强大的年代，歼-8捍卫着中国的蓝天
            。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            歼-8Ⅱ战斗机是中国曾经的主力战斗机，虽然中国已经装备了歼-10、歼-11等战机，但仍然有一定数量的歼-8Ⅱ战斗机在发挥余热
            ，继续巡航值班 。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            作为自主产权第一机，歼-8放飞的是中国人的梦想，挺起的是中国人的脊梁。歼-8飞机的研制之路充满艰辛坎坷，中国航空工业的先驱们，用激情、热血甚至生命，生动诠释了艰苦奋斗、顽强拼搏、牺牲奉献的科技报国精神
            。
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            歼-8系列战斗机在30多年的服役岁月里，一直活跃在与对手主力战机对抗的最前沿，为捍卫祖国的海空安全立下了不朽功勋。半个世纪的歼-8发展史，也是一部中国航空工业不断壮大的宏大叙事，虽历经坎坷和曲折，却硕果累累。在此过程中，歼-8不仅作为一款战斗机型驰骋蓝天守卫陆域海疆，同时还承担了大量试验飞行任务……这些验证飞行所取得的经验和数据，有力地促进了中国航空事业的后续发展
            。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .jian20 {
    background-image: url(../assets/WechatIMG165.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
    overflow: auto;

    .content {
      padding-left: 3vw;
      padding-top: 3vw;
      width: 100%;
      position: relative;
      .name {
        font-size: 3vw;
      }
      .title {
        font-size: 2vw;
      }
      .plan {
        width: 65vw;
        margin-left: 12vw;
        position: relative;
        top: -6vw;
      }

      .width {
        position: absolute;
        left: 0vw;
        width: 20vw;
        text-align: center;
        font-size: 2vw;
        border-bottom: 2px solid yellow;
        top: 5vw;
        transform: rotateZ(-70deg);
        transform-origin: right bottom;
        &::after {
          content: '';
          position: absolute;
          left: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent yellow transparent transparent;
        }
        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }

      .height {
        position: absolute;
        left: 21vw;
        width: 57vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: -2vw;
        transform: rotateZ(20deg);
        transform-origin: left bottom;
        &::after {
          content: '';
          position: absolute;
          left: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent yellow transparent transparent;
        }
        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }

      .area {
        position: absolute;
        left: 70vw;
        width: 25vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 42vw;

        .line {
          width: 18vw;
          height: 2px;
          background: yellow;
          position: absolute;
          left: -18vw;
          bottom: -2px;
          transform-origin: right bottom;
          transform: rotateZ(80deg);
        }
      }

      .enter {
        position: absolute;
        left: 22vw;
        width: 30vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 40vw;

        .line {
          width: 15vw;
          height: 2px;
          background: yellow;
          position: absolute;
          right: -15vw;
          bottom: -2px;
          transform-origin: left bottom;
          transform: rotateZ(-80deg);
        }
      }

      .zhong1 {
        position: absolute;
        left: 0vw;
        width: 25vw;
        text-align: center;
        font-size: 2vw;
        border-bottom: 2px solid yellow;
        top: 28vw;
        transform-origin: left bottom;

        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }
    }

    .text {
      width: 100%;
      display: flex;
      margin-top: 3vw;
      padding-bottom: 5vw;
      overflow: hidden;
      .left {
        width: 50%;
        padding-left: 4vw;
        padding-right: 4vw;
        .title {
          display: flex;
          align-items: center;
          height: 3.5vw;
          font-size: 2.5vw;
          div {
            width: 2vw;
            height: 3.5vw;
            margin-right: 1vw;
            border: 1px solid brown;
            background: yellow;
          }
        }
        .item {
          display: flex;
          margin-top: 1vw;
          .dot {
            width: 1vw;
            height: 1vw;
            background: yellow;
            margin-right: 1vw;
            margin-left: 0.5vw;
            transform: rotateZ(45deg);
            position: relative;
            top: 0.5vw;
          }
          .item-text {
            flex: 1;
            font-size: 1.5vw;
          }
        }

        .bullt {
          position: relative;

          img {
            width: 20vw;
            margin-left: 5vw;
            margin-top: 3vw;
            transform: rotateZ(-70deg);
          }

          .area {
            position: absolute;
            left: 12vw;
            width: 20vw;
            text-align: center;
            font-size: 3vw;
            border-bottom: 2px solid yellow;
            top: 19vw;

            .line {
              width: 10vw;
              height: 2px;
              background: yellow;
              position: absolute;
              left: -10vw;
              bottom: -2px;
              transform-origin: right bottom;
              transform: rotateZ(80deg);
            }
          }
        }

        .plan1 {
          width: 26vw;
        }
        .plan2 {
          width: 30vw;
        }

        .plan-name {
          text-align: center;
          font-size: 3vw;
          position: relative;
          bottom: -2vw;
        }
      }
    }
  }
</style>
